<template>
  <el-row>
    <el-col :span="22" :offset="1">

      <!--卡片shart-->
      <el-card class="box-card" style="padding: 0 15px;">

        <!--标签页-->
        <el-tabs type="card" v-model="activeName" style="line-height: 40px;">

          <el-row style="width:100%;margin-top:30px;">
            <!--创建时间-->
            <el-col :span="4" :offset="0" style="width: 440px;">
              <span style="font-size: 15px;margin-right: 5px;">创建时间</span>
              <el-date-picker v-model="clinictimeSelect" type="daterange" align="right"
                              unlink-panels
                              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                              :picker-options="clinictimeOptions" style="">
              </el-date-picker>
            </el-col>

            <!--接诊状态-->
            <el-col :span="4" :offset="0" style="">
              <span style="margin-left:20px;font-size: 15px;margin-right: 5px;width: 250px;">接诊状态</span>
              <el-select v-model="departmentValue" placeholder="请选择" style="width: 150px;">
                <el-option v-for="item in departmentOptions" :key="item.name" :label="item.label" :value="item.name">
                </el-option>
              </el-select>
            </el-col>

            <!--查询框-->
            <el-col :span="7" :offset="0" style="margin-left:20px;">
              <el-input placeholder="输入患者姓名" v-model="searchValue" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="querySubmit"></el-button>
              </el-input>
            </el-col>

          </el-row>



          <!--卡片-->
          <el-row style="margin-top: 20px;">
            <el-col :span="7" v-for="(o, index) in 8" :key="o" :offset="index%3 == 0 ? 0 : 1" ><!--index从0开始-->
              <el-card :body-style="{ padding: '0px' }" style="width:420px;height:210px;padding: 20px;margin-bottom: 20px;">

                <!--第1行-->
                <el-row :gutter="20" style="height:170px;">
                  <!--头像-->
                  <el-col :span="5" :offset="0" style="">
                    <img src="http://qhnt77jpu.hd-bkt.clouddn.com/Fuj5KKYZZW-v5q9GvVQEKWMLn7bS" class="image">
                    <!--https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png-->
                  </el-col>

                  <!--文字信息-->
                  <el-col :span="18" :offset="1" style="">
                    <div style="float:left;">李静 女 25
                      <el-tag  :key="待接诊" :type="danger" effect="dark">
                        待接诊
                      </el-tag>
                    </div>
                    <div style="float:left;">创建时间：2019-11-19 22:33:44</div>
                    <div style="float:left;">科室：全科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;医生：王冕</div>
                    <div style="float:left;">手机号码：18879867899</div>
                  </el-col>
                </el-row>

                <!--第2行-->
                <el-row :gutter="40" style="height:170px">
                  <el-col :span="12" :offset="0" style="line-height:50px;color: #858BED;border-top: 1px solid #EBEBEB;">
                    <el-button type="text" @click="fun1"><strong>接诊</strong></el-button>
                  </el-col>
                  <el-col :span="12" :offset="0" style="line-height:50px;border-left: 1px solid #EBEBEB;border-top: 1px solid #EBEBEB;">
                    查看患者信息
                  </el-col>
                </el-row>

              </el-card>
            </el-col>
          </el-row>


        </el-tabs>

      </el-card>
      <!--卡片end-->

    </el-col>
  </el-row>
</template>

<script>
    export default {
      name: "1.vue",
      data() {
        return {
          currentDate: new Date(),
          departmentValue: '',
          departmentOptions: [{
            name: '选项1',
            label: '全部'
          }, {
            name: '选项2',
            label: '待接诊'
          }, {
            name: '选项3',
            label: '接诊中'
          }, {
            name: '选项4',
            label: '已完成'
          }],

          //时间
          clinictimeSelect: '',
          clinictimeOptions: {
            shortcuts: [
              {
                text: '今天',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '昨天',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近三天',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近两周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 21);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近两个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                  picker.$emit('pick', [start, end]);
                }
              }]
          },




        }
      },
      methods: {
        handleClick(row) {
          console.log(row);
        },
        querySubmit() {
          console.log('submit!');
        },
        fun1:function () {
          this.$router.push("/newtreat")
        }


      }
    }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    /*width: 100%;*/
    display: block;
    width: 80px;height: 80px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
